/*
 * @Author: your name
 * @Date: 2020-12-07 11:52:44
 * @LastEditTime: 2020-12-16 16:58:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \H5 2010 studyd:\phpStudy\WWW\steam\js\list\list.js
 */
require(['../config'],()=>{
    require(['template','jquery','header','footer','nav','cookie'],(template)=>{
        class List {
            constructor() {
                this.searchInputFocus()
                this.searchClick()
                this.optionsChange()
                this.getListData()
            }
        
            // 点击 input placeholder 消失，点击别的地方 如果 input 没东西，placehoder 出现
            searchInputFocus() {
                $('.search-left input').focus(function () {
                    if ($(this)[0].placeholder = '输入搜索词或标签') {
                        $(this)[0].placeholder = ' '
                    }
                })
                $('.search-left input').blur(function () {
                    if ($(this)[0].placeholder = ' ') {
                        $(this)[0].placeholder = '输入搜索词或标签'
                    }
                })
            }
        
            // 搜索栏的点击事件
            searchClick() {
                $('body').click(function (e) {
                    // 点击排序依据的下拉框
                    if ($(e.target).attr('class').indexOf('select-sort') !== -1 || $(e.target).attr('class') == 'select-option' || $(e.target).attr('class') == 'downArrow') {
                        $('.sortBox div').removeClass('defalut').addClass('active').find('ul').css({
                            visibility: 'visible',
                            opacity: 1
                        })
                    } else {
                        $('.sortBox div').removeClass('active').addClass('defalut').find('ul').css({
                            visibility: 'hidden',
                            opacity: 0
                        })
                    }
        
                    // 点击 搜索按钮 出现 白边框
                    if ($(e.target).attr('class').indexOf('list-searchBtn') !== -1) {
                        $('.list-searchBtn').css({
                            border: '1px solid #fff'
                        })
                    } else {
                        $('.list-searchBtn').css({
                            border: '1px solid transparent'
                        })
                    }
                })
            }
        
            // 鼠标划过 下拉框的选项 改变其的类名
            // 点击下拉框的选项 改变头部显示的文字
            optionsChange(){
                $('.select-sort ul li a').mouseover(function () {
                    $(this).removeClass().addClass('selected').parent().siblings().find('a').removeClass().addClass('selection')
                })
                $('.select-sort ul li a').click(function () {
                    $('.select-option').text($(this).text())
                })
            }

            // 获取数据
            getListData(){
                $.get('/api/app/mock/273331/index/games', res => {
                    if(res.code === 200){
                        
                        const listGame = []
                        for(let key in res.focusGame){
                            listGame.push(res.focusGame[key])
                        }
                        for(let key in res.recGame){
                            for(let key1 in res.recGame[key]){
                                listGame.push(res.recGame[key][key1])
                            }
                        }
                        
                        $('#listGames').html(template('listGamesTemplate',{listGame : listGame}))

                    }
                })
            }
        }
        return new List
    })
})

// 点击 input placeholder 消失，点击别的地方 如果 input 没东西，placehoder 出现
// $('.search-left input').focus(function(){
//     if($(this)[0].placeholder='输入搜索词或标签'){
//         $(this)[0].placeholder=' '
//     }
// })
// $('.search-left input').blur(function(){
//     if($(this)[0].placeholder=' '){
//         $(this)[0].placeholder='输入搜索词或标签'
//     }
// })

// 搜索栏的点击事件
// searchClick()

// function searchClick() {
//     $('body').click(function (e) {
//         // 点击排序依据的下拉框
//         if ($(e.target).attr('class').indexOf('select-sort') !== -1 || $(e.target).attr('class') == 'select-option' || $(e.target).attr('class') == 'downArrow') {
//             $('.sortBox div').removeClass('defalut').addClass('active').find('ul').css({
//                 visibility: 'visible',
//                 opacity: 1
//             })
//         } else {
//             $('.sortBox div').removeClass('active').addClass('defalut').find('ul').css({
//                 visibility: 'hidden',
//                 opacity: 0
//             })
//         }

//         // 点击 搜索按钮 出现 白边框
//         if ($(e.target).attr('class').indexOf('list-searchBtn') !== -1) {
//             $('.list-searchBtn').css({
//                 border: '1px solid #fff'
//             })
//         } else {
//             $('.list-searchBtn').css({
//                 border: '1px solid transparent'
//             })
//         }
//     })
// }

// 鼠标划过 下拉框的选项 改变其的类名
// $('.select-sort ul li a').mouseover(function () {
//     $(this).removeClass().addClass('selected').parent().siblings().find('a').removeClass().addClass('selection')
// })

// // 点击下拉框的选项 改变头部显示的文字
// $('.select-sort ul li a').click(function () {
//     $('.select-option').text($(this).text())
// })
